<template>
	<view class="contents">
		<view class="navs">
			<view class="Top">
				<view id="top">
					<view class="GlassBody">
						<image class="Glass" src="/static/tab/searchimg.png"></image>
					</view>
					<view id="TextTop">
						<input type="text" placeholder="搜索卖出的宝贝" class="TextTop" />
					</view>
				</view>
				<view class="search">搜索</view>
			</view>
			<view class="then">
				<vtabs activeColor="black" lineColor="black" color="#999" v-model="current" :tabs="tabs"
					@change="changeTab">
				</vtabs>
			</view>
		</view>
		<view class="listbox">
			<view class="lists" v-for="(item, index) in 20">
				<view class="tops">
					<image class="headerimg cuicenter"
						src="https://img1.baidu.com/it/u=3572707476,2215453850&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1066">
					</image>
					<view class="username cuicenter">大家发财</view>
					<view class="status yellow cuicenter">待收货</view>
					<view class="status red cuicenter">已退款</view>
					<view class="status lv cuicenter">交易成功</view>
				</view>
				<view class="line">
					<image class="goodname cuicenter"
						src="https://img1.baidu.com/it/u=3572707476,2215453850&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1066">
					</image>
					<view class="thename cuicenter">
						<view>小程序定制服务,50元起</view>
					</view>
					<view class="rights cuicenter">
						<view class="righttop">
							<text class="text1">¥</text>
							<text class="text2">200.00</text>
						</view>
						<view class="numbers">×24</view>
					</view>
				</view>
				<view class="bottom">
					<view class="more cuicenter">
						更多
						<view class="downs"></view>
					</view>
					<view class="btns cuicenter">
						<view>联系买家</view>
						<!-- <view>提醒收货</view> -->
						<view>删除订单</view>
						<view class="fahuo">去发货</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import vtabs from "@/components/v-tabs/v-tabs"
export default {
	data() {
		return {
			current: 0,
			tabs: ['全部', '待付款', '待发货', '待收货', '退款中', '待上架']
		}
	},
	components: {
		vtabs
	},
	methods: {
		changeTab(index) {
			console.log('当前选中的项：' + index)
		}
	}
}
</script>

<style scoped>
.fahuo {
	background: black !important;
	color: white !important;
}

.then {
	padding-top: 20rpx;
}

.GlassBody {
	width: 32upx;
	height: 36upx;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	float: left;
}

.Glass {
	width: 30upx;
	height: 30upx;
	padding-top: 4upx;
	padding-bottom: 6upx;
	padding-right: 6upx;
	position: relative;
	top: 50%;
	transform: translateY(-40%);

}


#TextTop {
	width: 240upx;
	height: 100%;
	float: left;
}

.TextTop {
	width: 234upx;
	height: 14upx;
	font-family: PingFang HK, PingFang HK;
	font-weight: 400;
	font-size: 26upx;
	line-height: 71rpx;
	min-height: 71rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin: 0 auto;
	position: relative;
}

.Top {
	width: 670upx;
	padding: 20rpx 0;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	top: 0upx;
	z-index: 99;
	background: white;
	left: 0;
	padding: 0 20upx;
	box-sizing: border-box;
}

#top {
	background: #f8f8f8;
	width: 100%;
	height: 80upx;
	margin: 0 auto;
	padding: 0 20rpx;
	border-radius: 11rpx;
	box-sizing: border-box;
}

.navs {
	position: fixed;
	top: 0;
	width: 100%;
	background: white;
	z-index: 99;
	box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.2);
}

.listbox {
	padding: 0 20upx;
	box-sizing: border-box;
}

.lists {
	margin: 0 auto;
	background: white;
	margin-top: 20rpx;
	padding: 17rpx;
	box-sizing: border-box;
	border-radius: 18rpx;
	box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.1);
}

.contents {
	min-height: 100vh;
	background: #fafafa;
	padding-top: 211rpx;
	padding-bottom: 20upx;
}

.btns {
	float: right;
}

.btns>view {
	float: left;
	width: 144rpx;
	height: 59rpx;
	border-radius: 12rpx;
	line-height: 59rpx;
	font-size: 27rpx;
	text-align: center;
	color: #1f1f1f;
	margin-left: 20rpx;
	background: #e6e6e6;
}

.bottom {
	height: 80rpx;
	padding: 0 20rpx;
	height: 70rpx;
	margin-top: 20rpx;
	box-sizing: border-box;
}

.bottom .more {
	float: left;
	font-size: 28rpx;
	color: #a3a3a3;
}

.righttop .text1 {
	font-size: 20upx;
	font-weight: bold;
}

.righttop .text2 {
	font-size: 30upx;
	font-weight: bold;
}

.numbers {
	font-size: 20upx;
	text-align: right;
	color: #a3a3a3;
}

.rights {
	float: right;
}

.thename {
	float: left;
	width: 51%;
	margin-left: 20upx;
}

.line {
	height: 143rpx;
	padding: 0 20upx;
	box-sizing: border-box;
	margin-top: 10rpx;
}

.goodname {
	width: 143rpx;
	height: 143rpx;
	border-radius: 10upx;
	float: left;
}

.tops {
	overflow: hidden;
	padding: 0 20upx;
	height: 80upx;
}

.tops .username {
	float: left;
	font-size: 30upx;
}

.tops .status {
	float: right;
	color: white;
	font-size: 24rpx;
	padding: 6rpx 13rpx;
	border-radius: 10rpx;
}

.yellow {
	background: rgb(208, 182, 0);
	color: white;
}

.red {
	color: rgb(0, 188, 0);
	background: rgb(188, 0, 0);
}

.lv {
	color: white;
	background: rgb(0 140 0);
}

.headerimg {
	width: 50rpx;
	height: 50rpx;
	margin-right: 15upx;
	float: left;
	border-radius: 50%;
}
</style>
